<template>
	<view class="detail">
		<view class="header">
			<uni-icons type="left" size="50rpx" color="#fff" @click="backHandler"></uni-icons>
			<view>职位详情</view>
			<uni-icons type="star" size="50rpx" color="#fff" @click="addCollectWork(elem?._id)"
				v-if="collectWorkId.indexOf(elem?._id) == -1"></uni-icons>
			<uni-icons type="star-filled" size="50rpx" color="#fff" @click="removeCollectWork(elem?._id)" v-else>
			</uni-icons>
		</view>
		<view class="null"></view>
		<view class="section">
			<view class="message">
				<view class="titles">
					<view>{{ elem?.title }}</view>
					<text>{{ elem?.salary }}</text>
				</view>
				<view class="text">
					<view>{{ elem?.workAddress }}</view>
					&nbsp;| &nbsp;
					<view>{{ elem?.workRange }}</view>
					&nbsp;| &nbsp;
					<view>{{ elem?.education }}</view>
				</view>
				<view class="bton">
					<view v-for="(item, index) in elem?.welfare" :key="index">
						{{ item }}
					</view>
				</view>
				<view class="line"></view>
				<view class="bottom" @click="toCompeny(elem?.companyId)">
					<!-- <img :src="elem?.companyInfo[0].logoUrl" alt="" /> -->
					<image :src="elem?.companyInfo[0].logoUrl" mode=""></image>
					<view class="botm">
						<text>{{ elem?.companyInfo[0].title }}</text>
						<view>
							{{ elem?.companyInfo[0].companyType }}
							{{ elem?.companyInfo[0].companyNumber }}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="with">
			<view class="withtitle">职位详情</view>

			<view class="Tooption">岗位要职：</view>
			<view class="option" v-for="(opt, index) in showHandleList" :key="index">
				{{ opt.title }}
			</view>
			<view class="show-more" v-if="this?.toLearnList?.length >= 2" @click="showAll = !showAll">
				{{ word }}
				<uni-icons type="bottom" size="30rpx" color="#5fae53" class="score-img"
					:class="{ 'rotate-img': showAll }" v-if="this?.toLearnList?.length >= 2"></uni-icons>
				<uni-icons type="top" size="30rpx" color="#5fae53" class="score-img" :class="{ 'rotate-img': showAll }"
					v-else>
				</uni-icons>
			</view>

			<view class="withtitles">任职资格</view>
			<view class="option" v-for="(word, index) in elem?.works" :key="index + 'word'">
				{{ word?.title }}
			</view>
		</view>

		<view class="footer">
			<view @click="dialogToggle(index)">
				立即投递
			</view>
		</view>
		<view class="nulls"></view>

		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="确认" title="通知" content="是否投递给该公司!"
					@confirm="dialogConfirm(elem)" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>

	</view>
	<!-- 	<view v-else class="olod">
			<van-loading color="#17b2b4" size="30rpx" />
		</view>
 -->
	<!-- </view> -->
	<!-- </view> -->
</template>

<script>
	// import qs from "qs";
	export default {
		name: "Latest",
		data() {
			return {
				id: this.$route.query.id,
				elem: null,
				toLearnList: [],
				showAll: false,
				icon: true,
				words: [],
				list: [],
				collectWorkId: JSON.parse(localStorage.getItem("collectWorkId")) || [],
				collectWorkList: JSON.parse(localStorage.getItem("collectWorkList")) || [],
				type: 'center',
				msgType: 'success',
				sendList: JSON.parse(localStorage.getItem("sendList")) || [], //投递列表
			};
		},
		onLoad(option) {
			console.log(option.id);
			if (option.id) {
				console.log(option.id);
				uni.request({
						url: 'https://yw.52kfw.cn/api/v1/company/work-info?workid=' + option.id
					}).then((res) => {
						console.log(res.data.data);
						this.elem = res.data.data;
						this.toLearnList = [...res.data.data.description];
					})
					.catch(() => {
						return;
					});


			}
		},
		methods: {
			backHandler() {
				uni.navigateBack()
			},
			//收藏岗位
			addCollectWork(id) {
				let token = localStorage.getItem("token");
				if (token) {
					// let workId = JSON.parse(localStorage.getItem("collectWorkId")) || [];
					this.collectWorkId = [...this.collectWorkId, id];
					localStorage.setItem("collectWorkId", JSON.stringify(this.collectWorkId));
					// let followList = JSON.parse(localStorag.getItem("collectWorkList")) || []
					this.collectWorkList = [...this.collectWorkList, this.elem]
					localStorage.setItem("collectWorkList", JSON.stringify(this.collectWorkList));

					uni.showToast({
						title: '收藏成功',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}
			},
			//取消收藏岗位
			removeCollectWork(id) {
				// let workId = JSON.parse(localStorage.getItem("collectWorkId")) || [];
				this.collectWorkId = this.collectWorkId.filter((o) => o != id);
				localStorage.setItem("collectWorkId", JSON.stringify(this.collectWorkId));
				this.collectWorkList = this.collectWorkList.filter((o) => o._id != id);
				localStorage.setItem("collectWorkList", JSON.stringify(this.collectWorkList));
				uni.showToast({
					title: '取消收藏',
					icon: 'none'
				})
			},
			
			//跳转公司详细页
			toCompeny(id) {
				uni.navigateTo({
					url: '/pages/firm/firm?id=' + id
				})
				
			},
		
			
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},

			//点击投递
			dialogToggle() {
				let token = localStorage.getItem("token")
				if (token) {
					this.msgType = 'success';
					// console.log(this.$refs.alertDialog[index]);
					this.$refs.alertDialog.open()
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					});

				}

			},
			dialogConfirm(item) {
				console.log('点击确认');
				// console.log(this.sendList);

				// this.sendList = [...this.sendList,item];
				this.sendList.push(item);

				//去重
				let newArr = [];
				for (let i = 0; i < this.sendList.length; i++) {
					if (newArr.indexOf(this.sendList[i]._id) == -1) {
						newArr.push(this.sendList[i]._id);
					} else {
						this.sendList.splice(i, 1);
					};
				};

				console.log(this.sendList);
				localStorage.setItem("sendList", JSON.stringify(this.sendList));

				//跳转到聊天页面
				uni.navigateTo({
					url: '/pages/call/call?workid=' + item._id
				});

			},
			dialogClose() {
				console.log('点击关闭')
			},
		},
		computed: {
			//切换展开与收起
			showHandleList() {
				if (this.showAll == false) {
					var showList = [];
					if (this.toLearnList.length > 2) {
						for (var i = 0; i < 2; i++) {
							showList.push(this.toLearnList[i]);
						}
					} else {
						showList = this.toLearnList;
					}
					return showList;
				} else {
					return this.toLearnList;
				}
			},
			word() {
				if (this.showAll == false) {
					return "展开";
				} else {
					return "收起";
				}
			},
		},
	};
</script>

<style lang="scss">
	.detail {
		width: 100vw;

		.footer {
			width: 100vw;
			height: 120rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			right: 0;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;

			view {
				width: 80%;
				height: 80rpx;
				border-radius: 36rpx;
				background-color: #5fae53;
				color: #fff;
				text-align: center;
				line-height: 80rpx;
				letter-spacing: 4rpx;
				font-size: 28rpx;
				font-weight: bold;
			}
		}

		.nulls {
			height: 60rpx;
		}

		.with {
			padding: 40rpx 30rpx;

			.withtitle {
				margin: 0 0 40rpx 0;
				text-align: start;
				font-weight: bold;
				font-size: 32rpx;
			}

			.withtitles {
				margin: 40rpx 0;
				text-align: start;
				font-weight: bold;
				font-size: 32rpx;
			}

			.Tooption {
				color: #333;
				font-size: 28rpx;
				text-align: start;
				margin-bottom: 20rpx;
			}

			.option {
				color: #666;
				// line-height: 20rpx;
				text-align: start;
				font-size: 24rpx;
				margin-bottom: 10rpx;
			}

			.show-more {
				color: #5fae53;
				font-size: 28rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.score-img {
					width: 16px;
					transition: all 0.4s;
				}

				.rotate-img {
					transform: rotate(180deg);
				}
			}
		}

		.section {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 120rpx;

			.message {
				width: 690rpx;
				height: 314rpx;
				background: #ffffff;
				box-shadow: 0rpx 6rpx 22rpx 0rpx rgba(1, 64, 153, 0.22);
				border-radius: 20rpx;
				padding: 10rpx 20rpx;
				box-sizing: border-box;

				.titles {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 36rpx;
					font-family: SourceHanSansCN;
					font-weight: 400;
					color: #333333;
					line-height: 70rpx;

					text {
						color: #149639;
					}
				}

				.text {
					display: flex;
					text-align: start;
					color: #999;
					margin-bottom: 10rpx;
				}

				.bton {
					display: flex;

					view {
						padding: 2rpx 10rpx;
						background-color: #f4f4f4;
						margin-right: 10rpx;
						border-radius: 10rpx;
						font-size: 24rpx;
					}
				}

				.line {
					width: 100%;
					border-top: 2rpx solid #f3f3f3;
					margin: 30rpx 0;
				}

				.bottom {
					display: flex;
					align-items: center;
					justify-content: start;

					image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						margin-right: 20rpx;

					}


					.botm {
						text-align: start;

						text {
							font-size: 14rpx;
							font-family: SourceHanSansCN;
							font-weight: 400;
							color: #333333;
						}

						view {
							color: #999;
							font-size: 20rpx;
							transform: scale(0.8);
							transform-origin: left bottom;
						}
					}
				}
			}
		}

		.null {
			height: 75rpx;
			width: 100%;
		}

		.header {
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			width: 100%;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			font-size: 36rpx;
			font-weight: bold;
			background-color: #5fae53;
			color: #fff;
		}
	}

	.olod {
		position: fixed;
		top: 50%;
		width: 40rpx;
		height: 40rpx;
		margin-top: -20rpx;
		left: 50%;
		margin-left: -20rpx;
		z-index: 100;
	}
</style>
